<template>
	<div class="box">
		<div class="head">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path:'/audit' }"><span style="font-size: 18px;">审核管理</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="main">
			<div class="top"></div>
			<div class="form">
				<template>
					<el-table :data="tableData" style="width: 100%;">
						<el-table-column prop="id" label="序号">
						</el-table-column>
						<el-table-column prop="title" label="标题">
						</el-table-column>
						<el-table-column prop="describes" label="描述">
						</el-table-column>
						<el-table-column prop="phone" label="手机号">
						</el-table-column>
						<el-table-column prop="price" label="价格">
						</el-table-column>
						<el-table-column prop="area" label="面积">
						</el-table-column>
						<el-table-column prop="district" label="区域">
						</el-table-column>
						<el-table-column prop="plot_site" label="小区">
						</el-table-column>
						<el-table-column prop="deploy" label="配置">
						</el-table-column>
						<el-table-column prop="type" label="类型">
						</el-table-column>
						<el-table-column prop="floor_sum" label="楼层总数">
						</el-table-column>
						<el-table-column prop="floor" label="所处楼层">
						</el-table-column>
						<el-table-column prop="cz" label="操作">
							<template slot-scope="scope">
								<span class="jr" @click="compile(scope.row.id,scope.row)">审核</span>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<el-dialog title="审核" :visible.sync="centerDialogVisible" width="40%" center>
				<div class="messing">
					<el-row>
						<el-col :span="12">
							<div>
								房源标题：{{form.title}}
							</div>
						</el-col>
						<el-col :span="12">
							<div>
								房源描述：{{form.describes}}
							</div>
						</el-col>
					</el-row>
					<el-row style="margin-top: 20px;">
						<el-col :span="12">
							<div>
								手机号：{{form.phone}}
							</div>
						</el-col>
						<el-col :span="12">
							<div>
								房子价格：{{form.price}}
							</div>
						</el-col>
					</el-row>
					<el-row style="margin-top: 20px;">
						<el-col :span="12">
							<div>
								房子面积：{{form.area}}
							</div>
						</el-col>
						<el-col :span="12">
							<div>
								房子区域：{{form.district}}
							</div>
						</el-col>
					</el-row>
					<el-row style="margin-top: 20px;">
						<el-col :span="12">
							<div>
								房子小区：{{form.plot_site}}
							</div>
						</el-col>
						<el-col :span="12">
							<div>
								房子配置：{{form.deploy}}
							</div>
						</el-col>
					</el-row>
					<el-row style="margin-top: 20px;">
						<el-col :span="12">
							<div>
								房子类型：{{form.type}}
							</div>
						</el-col>
						<el-col :span="12">
							<div>
								房子总楼层：{{form.floor_sum}}
							</div>
						</el-col>
					</el-row>
					<el-row style="margin-top: 20px;">
						<el-col :span="12">
							<div>
								所处楼层：{{form.floor}}
							</div>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<p>室内图片</p>
							<div v-for="item in type1">
								<img :src="'http://localhost:3000'+item" alt="" width="100px" height="100px"
									style="margin-left: 20px;float: left;">
							</div>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<p>户型图片</p>
							<div v-for="item in type2">
								<img :src="'http://localhost:3000'+item" alt="" width="100px" height="100px"
									style="margin-left: 20px;float: left;">
							</div>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<p>室外图片</p>
							<div v-for="item in type3">
								<img :src="'http://localhost:3000'+item" alt="" width="100px" height="100px"
									style="margin-left: 20px;float: left;">
							</div>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<p>封面图片</p>
							<div v-for="item in type4">
								<img :src="'http://localhost:3000'+item" alt="" width="100px" height="100px"
									style="margin-left: 20px;float: left;">
							</div>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<p>审核</p>
							<div style="margin-left: 8%;">
								<input type="radio" name="a" @click="pass">通过
								<input type="radio" name="a" @click="nopass" style="margin-left: 50px;">不通过
							</div>
							<div v-if="isshow">
								原因：<el-input type="textarea" v-model="textarea"></el-input>
							</div>
						</el-col>
					</el-row>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submit">提交</el-button>
				</span>
			</el-dialog>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				centerDialogVisible: false,
				form: {
					state: '',
					title: '',
					describes: '',
					phone: '',
					plot_id: '',
					type: '',
					district: '',
					deploy: '',
					floor: '',
					floor_sum: '',
					area: '',
					price: ''
				},
				type1: [],
				type2: [],
				type3: [],
				type4: [],
				isshow: false,
				textarea: '',
				state: '',
				id: ''
			}
		},
		watch: {
			centerDialogVisible(e) {
				if (e == false) {
					this.type1 = [],
						this.type2 = [],
						this.type3 = [],
						this.type4 = []
				}
			}
		},
		mounted() {
			this.gethouses()
		},
		methods: {
			nopass() {
				this.isshow = true
				this.state = '2'
			},
			pass() {
				this.isshow = false
				this.state = '1'
			},
			fp(id) {
				this.housesid = id
			},
			gethouses() {
				var _this = this
				axios.get('/audithouses').then(function(res) {
					console.log(res)
					_this.tableData = res.data.res
				})
			},
			newbuild() {
				this.centerDialogVisible = true
			},
			compile(id, data) {
				this.form = data
				this.id = id
				console.log(id)
				this.centerDialogVisible = true
				var _this = this
				axios.get('/audithouses_img', {
					params: {
						id
					}
				}).then(function(res) {
					console.log(res)
					let imglist = []
					imglist = res.data.res
					for (var i = 0; i < imglist.length; i++) {
						if (imglist[i].type == 1) {
							_this.type1.push(imglist[i].indoor)
							console.log(_this.type1)
						} else if (imglist[i].type == 2) {
							_this.type2.push(imglist[i].indoor)
						} else if (imglist[i].type == 3) {
							_this.type3.push(imglist[i].indoor)
						} else if (imglist[i].type == 4) {
							_this.type4.push(imglist[i].indoor)
						}
					}
				})
			},
			submit() {
				var _this = this
				axios.post('/audithouseslist', {
					id: this.id,
					state: this.state
				}).then(function(res) {
					console.log(res)
					if (res.data.code == 200) {
						_this.centerDialogVisible = false
						_this.gethouses()
						_this.form = []
						_this.id = ''
						_this.state=''
						_this.$message({
							message: res.data.msg
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 80%;
	}

	.head {
		width: 100%;
		height: 5%;
	}

	.top {
		width: 100%;
		height: 1px;
		line-height: 60px;
		text-align: left;
		background: gray;
	}

	/deep/.el-dialog {
		width: 30%;
	}

	/deep/ .el-table thead th.el-table__cell {
		background-color: #f5f5f5;
		text-align: center;
	}

	/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
		text-align: center;
	}

	/deep/ .el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border: 1px solid #EBEEF5;
		;
	}

	.main {
		width: 100%;
		height: 700px;
		background: #FFFFFF;
	}

	.jr {
		color: #6e9eec;
		margin-left: 10px;
		text-decoration: none;
	}

	.button {
		margin-left: 10px;
		background: gray;
		color: #fff;
		border: none;
	}

	.buttontwo {
		margin-left: 15px;
		background: #0099FF;
		color: #fff;
		border: none;
	}

	.add {
		width: 400px;
		height: 500px;
		background: red;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

	}

	.avatar-uploader {
		width: 80%;
		margin-left: 10%;
		margin-top: 15px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px solid gray;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
